<!--活体金融抵押  -->
<template>
	<border cardTitle="高血压管理" class="maxTop">
		<Chart v-if="!isNull" :optionData="option_column" style="height: 95%"></Chart>
		<div v-else style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
			<img src="/img/dashboard/nullPng.png" alt="" />
		</div>
	</border>
</template>

<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	let color = ['#2467ED', '#16E4CF', '#EBA62C'];
	import {
		bigScreenApi
	} from '@/api/index';

	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		data() {
			return {
				option_column: {
					legend: {
						position: function(point, params, dom, rect, size) {
							return [point[1], 0];
						},
						type: 'scroll',
						orient: 'vertical',
						left: '60%',
						// right: 10,
						top: '0%',
						// height: '90',
						padding: [20, 20],
						itemWidth: 12,
						itemHeight: 12,
						textStyle: {
							fontSize: 12,
							color: '#fff'
						},
						pageIconSize: 12,
						tooltip: {
							show: false,
							formatter: p => {
								console.log(p);
								let val = p.value;
								let txtCon;
								if (val > 10000) {
									txtCon = "<div style='text-align:left'>" + p.data.legendname + ':<br />牛只总数：' + val.toFixed(2) +
										'万头</div>';
								} else {
									txtCon = "<div style='text-align:left'>" + p.data.legendname + ':<br />牛只总数：' + val + '头</div>';
								}
								return txtCon;
							}
						}
						// formatter: function (name) {
						// 	console.log(name);
						// 	return 'Legend ' + name;
						// }
					},
					tooltip: {
						show: true,
						formatter: p => {
							console.log(p);
							let val = p.value;
							let txtCon;
							if (val > 10000) {
								txtCon = "<div style='text-align:left'>" + p.data.legendname + ':<br />病人总数：' + val.toFixed(2) +
									'万人</div>';
							} else {
								txtCon = "<div style='text-align:left'>" + p.data.legendname + ':<br />病人总数：' + val + '人</div>';
							}
							return txtCon;
						}
					},
					// 颜色
					color: ['#56a6fb', '#59be58', '#ffbf0e', '#ff9600', '#fe6f09', '#E94256', '#7F60F9', '#e93c42', '#CC71E2',
						'#FFB958'
					],
					series: [{
						type: 'pie',
						radius: [0, '85%'],
						center: ['25%', '50%'],
						label: {
							//echarts饼图内部显示百分比设置
							show: false,
							position: 'inside', //outside 外部显示  inside 内部显示
							formatter: `{d}%`, // 显示百分比
							color: '#ffffff', //颜色
							fontSize: 13 //字体大小
						},
						data: [],
						itemStyle: {
							//   borderColor: '#fff',
							//   borderWidth: 2,
						}
					}]
				},
				isNull: true
			};
		},
		props: {
			level: {
				type: [String, Number],
				default: 0
			},
			areaList: {
				type: [Array],
				default: () => []
			},
			cityId: {
				type: [String, Number],
				default: ''
			}
		},
		watch: {
			level: {
				handler(newV, oldV) {
					this.getInfo();
				},
				immediate: true
			}
		},
		methods: {
			getInfo() {
				let cowData = [{
						pledgeCount: 12,
						xzqhmc: '偏低'
					}, {
						pledgeCount: 30,
						xzqhmc: '正常'
					},
					{
						pledgeCount: 65,
						xzqhmc: '正常高值'
					}, {
						pledgeCount: 123,
						xzqhmc: '轻度'
					}, {
						pledgeCount: 245,
						xzqhmc: '中度'
					}, {
						pledgeCount: 5,
						xzqhmc: '重度'
					}
				];
				let data = [];
				this.isNull = cowData.length == 0 ? true : false;
				cowData.forEach(item => {
					if (item.xzqhmc) {
						data.push({
							value: item.pledgeCount,
							legendname: item.xzqhmc,
							name: item.xzqhmc.slice(0, 3) + ' ' + item.pledgeCount + (item.pledgeCount > 10000 ? '万人' : '人')
						});
					}
				});
				this.option_column.series[0].data = data;
				// this.$postAction(bigScreenApi.pledgeCount, {
				// 	xzqhbm: this.level > 1 ? this.cityId : '',
				// 	level: this.level
				// }).then(res => {
				// 	if (res && res.code == 1) {

				// 	}
				// });
			}
		}
	};
</script>

<style>
	.maxTop {
		/* z-index: 99; */
	}
</style>